<%@page import="java.util.Arrays"%>
<%@page import="com.mycity.dao.CommentTab"%>
<%@page import="com.mycity.jsonops.PostOps"%>
<%@page import="com.mycity.dao.UserTab"%>
<%@page import="com.mycity.dao.PostTab"%>
<%
    UserTab user = (UserTab) session.getAttribute("user_info");
    PostTab post = (PostTab) request.getAttribute("post");
    UserTab owner = (UserTab) request.getAttribute("owner");
    Double[] coords = (Double[]) request.getAttribute("coords");
    CommentTab[] comments = (CommentTab[]) request.getAttribute("comments");
    Boolean hasDiamond = false;
    if (user != null) {
        hasDiamond = PostOps.isPostDiamonded(post.getPostId(), user.getUserId());
    }
%>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
        <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
        <title>View Post</title>

        <meta name='title' content='My City' />

        <!-- Main style -->
        <link rel="stylesheet" href="/MyCityWeb/css/style.css" type="text/css" />

        <link type="text/css" rel="stylesheet" href="https://www.gstatic.com/freebase/suggest/4_2/suggest.min.css" />
         <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
        <script type="text/javascript" src="https://www.gstatic.com/freebase/suggest/4_2/suggest.min.js"></script>
       
        <script 
            src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false"></script>
        
        <script type="text/javascript">
            var myloc = new google.maps.LatLng(<%=coords[0]%>, <%=coords[1]%>);
            var map;
            var marker;
            function initialize()
            {
                var props = {
                    center: myloc,
                    zoom: 20,
                    mapTypeId: google.maps.MapTypeId.ROADMAP
                };
                map = new google.maps.Map(document.getElementById("map-canvas"), props);
                marker = new google.maps.Marker({
                    position: myloc,
                    title: '<%=post.getLocName().isEmpty() ? "Nameless place" : post.getLocName()%>',
                    map: map
                });
            }

            google.maps.event.addDomListener(window, 'load', initialize);

        </script>

        <script type="text/javascript">
            function toggle_visibility(id)
            {
                var e = document.getElementById(id); // div text
                var x = id + 1;

                var e1 = document.getElementById(x.toString()); // div icons

                var expand = 'expand' + id;
                var e2 = document.getElementById(expand.toString()); // icon expand

                if (e.style.display == 'block') {
                    e.style.display = 'none';
                    e1.style.display = 'none';
                    e2.style.visibility = 'visible';
                }
                else {
                    e.style.display = 'block';
                    e1.style.display = 'block';
                    e2.style.visibility = 'hidden';
                }
            }

        </script>

        <script type="text/javascript">
            $(function() {
                $("#tagsearch").suggest({
                    key: "AIzaSyDIO2lbCrilTAPn9ZBIU1PL6n46FxnqgEw"
                }).bind("fb-select", function(e, data) {
                    $("#tagsearch").val(data.name + "(" + data.notable.name + ")");
                });
            });
        </script>


    </head>



    <body class="direction-right">

        <!------ HEADER (BEGIN) ---------------------------->
        <div class='header'>
            <!-- HEADER MENU ICONS (BEGIN) -->
            <div class='menu' style='float: right; margin-right:10px; margin-left:1px;'>
                <a href="/MyCityWeb/home.jsp"><img src="/MyCityWeb/img/home.png" title='HOME' /></a>
            </div>
            <!-- HEADER MENU ICONS (END) -->

        </div>	
        <!------- HEADER (END) -------------------------------->

        <div class='result-panel'>
            <div class='result-right'>


                <!-- QUESTION -->
                <div class='question'>
                    <div class='userInfoQuestion' style='left:0px; width:100%'>  
                        <span class='nameQuestion' style='border: 1px solid gray;'><a href="/MyCityWeb/User/profile/<%=owner.getUserId()%>"><%="[LEVEL=" + owner.getLevel() + "]  " + owner.getFirstname() + " " + owner.getLastname() + " at " + post.getLocName()%></a></span>

                        <span class='dateQuestion'><%=post.getPostDate()%></span>
                        <%if (user != null && user.getUserId() == owner.getUserId()) {%>
                        <a href='<% out.print("/MyCityWeb/Post/deletePost/" + post.getPostId());%>' id='like'>
                            <img class='diamond'  src="/MyCityWeb/img/icons/delete.png" /></a>	
                            <%}%>
                            <%if (user != null) {%>
                        <a href='<% if (!hasDiamond) {
                                out.print("/MyCityWeb/Post/giveDiamond/" + post.getPostId());
                            } else {
                                out.print("/MyCityWeb/Post/removeDiamond/" + post.getPostId());
                            }%>' id='like'>
                            <img class='diamond'
                                 width="36px"
                                 height="32px"
                                 <% if (!hasDiamond) {%>
                                 onmouseover="src = '/MyCityWeb/img/icons/diamond.png';" 
                                 onmouseout="src = '/MyCityWeb/img/icons/diamond1.png';"  
                                 src="/MyCityWeb/img/icons/diamond1.png" 
                                 <%} else {%>
                                 src="/MyCityWeb/img/icons/diamond.png" 
                                 <%}%>/></a>	
                            <%}%>
                    </div>
                    <div class='answer' style='left:5px; width:99%;'>

                        <p class='answer'>
                            <%=post.getPostContent()%>
                        </p>
                        

                        <%if (post.getPostType() == 2) {%>
                        <div class='postImg'>
                            <img  width="800px" height="600px" src='http://i.imgur.com/<%=post.getPicId()%>.jpg'/>
                        </div>
                        <%}%>
                        <div id='map-canvas' style="height: 300px; width:100%;  margin-bottom:10px;">
                        </div>
                        <p class='answer'>
                            <%="TAGS: "+Arrays.deepToString(post.getTags())%>
                        </p>


                    </div>

                </div>


                <!-- QUESTION -->

                <div class='divider'></div>

                <!-- ANSWERS -->
                <%
                    if (comments != null) {
                        int size = comments.length;
                        if (size > 0) {
                            for (int i = 0; i < size; i++) {
                %>
                <div class='question' onclick="toggle_visibility('<%=i + 5%>');">

                    <div class='userInfoQuestion'>       

                        <span class='nameQuestion' style='border: 1px solid gray;'><a href="/MyCityWeb/User/profile/<%=comments[i].getOwnerId()%>"><%=comments[i].getFullName()%></a></span>
                        <span class='nameQuestion' style='height:35px;'>                  

                        </span>					
                        <span class='dateQuestion'><%=comments[i].getDate()%></span>
                    </div>


                    <div class='question-icons'> 


                        <%if (user != null && (user.getUserId() == comments[i].getOwnerId() || user.getUserId() == owner.getUserId())) {%>
                        <a href="/MyCityWeb/Post/deleteComment/<%=post.getPostId()%>/<%=comments[i].getId()%>" ><img  class='dislike' src="/MyCityWeb/img/icons/delete.png" /></a>  
                        <%}%>

                        <a href='<% if (user != null && comments[i].getHasStar() == 0 && post.getUserId() == user.getUserId()) {
                                out.print("/MyCityWeb/Post/giveStar/" + post.getPostId() + "/" + comments[i].getId());
                            } else if (user != null && comments[i].getHasStar() == 1 && post.getUserId() == user.getUserId()) {
                                out.print("/MyCityWeb/Post/removeStar/" + post.getPostId() + "/" + comments[i].getId());
                            }%>' id='like'>
                            <img class='like'
                                 <% if (comments[i].getHasStar() == 0) {%>
                                 onmouseover="src = '/MyCityWeb/img/icons/star.png';" 
                                 onmouseout="src = '/MyCityWeb/img/icons/star1.png';"  
                                 src="/MyCityWeb/img/icons/star1.png"
                                 <%} else {%>
                                 src="/MyCityWeb/img/icons/star.png"
                                 <%}%>/>
                        </a>  
                    </div>    
                    <div class='answer' id ='<%=i + 5%>1'>
                        <p class='answer'>
                            <%=comments[i].getContent()%>
                        </p>
                    </div>

                </div>
                <%
                            }
                        }
                    }
                %>



                <!------------------------ ANSWER FORM ---------------------- -->
                <%if (user != null) {%>
                <div class='question'>
                    <div class='userInfoQuestion'>
                        Please add your comment to this post... 
                    </div>

                    <div class='answer'>

                        <form method='post' action='/MyCityWeb/Post/comment/<%=post.getPostId()%>' >
                            <textarea class='answer' autofocus='true' name="answer" placeholder="your comment here..."></textarea>
                            <input type="submit" id="subscribe-button" style='width:100%' value="Reply" />
                        </form>

                    </div>
                </div>
                <% }%>
                <!-- ANSWER FORM -->

            </div>
            <div class='result-left'>


                <div class='divider'></div>
                <div class='title'><span class='title'>SEARCH FOR TAGS</span></div>
                <div>
                    <form action='/MyCityWeb/Search/byTag/' method='post'>
                        <input type='text' name='searchtag'  id="tagsearch" autocomplete="off" placeholder='Enter a tag...' />
                        <input type='submit' class='city-search' value='SEARCH' />
                    </form>
                </div>
            </div>
        </div>
    </body>

